<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0px; padding: 0px }
  #sidebar { height: 100% }
  #map_canvas { height: 100% }
</style>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript"
    src="https://maps.google.com/maps/api/js?sensor=true">
</script>
<script type="text/javascript">
    google.load("jquery", "1.3.2");

    function initialize() {
        var latlng = new google.maps.LatLng(52.3685, 4.879);
        var myOptions = {
            zoom: 12,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"),
          myOptions);
        
        jQuery.get("data.xml", {}, function(data) {
            jQuery(data).find("marker").each(function() {
                var marker = jQuery(this);
                var latlng = new google.maps.LatLng(parseFloat(marker.attr("lat")),
                parseFloat(marker.attr("lng")));
                var marker = new google.maps.Marker({position: latlng, map: map, animation: google.maps.Animation.DROP});
            });
        }); 
    }

</script>
</head>
<body onload="initialize()">
  <!-- <div id="sidebar" style="width: 25%; height: 100%;"></div> -->
  <div id="map_canvas" style="width:75%; height:100%"></div>
</body>
</html>